<template>
	<view class="user">
		<!-- 用户信息 -->
		<view class="user-info">
			<view class="bg-top"></view>
			<view class="content">
				<view class="left">
					<image class="avatar" :src="userInfo.avatar || '/static/default-avatar.png'" mode="aspectFill" @click="setUserInfo()"></image>
					<view class="info">
						<block v-if="hasLogin">
							<view class="nickname">{{userInfo.nickname || '普通用户'}}</view>
							<view class="mobile">{{userInfo.mobile}}</view>
						</block>
						<block v-else>
							<view class="nickname">未登录</view>
							<view class="login-btn" @click="loginByWeixin()">点击登录</view>
						</block>
					</view>
				</view>
			</view>
		</view>

		<!-- 订单入口 -->
		<view class="card order-entrance">
			<view class="card-header">
				<text class="title">我的订单</text>
				<view class="more" @click="navToOrder()">
					<text>全部订单</text>
					<u-icon name="arrow-right" size="24" color="#666"></u-icon>
				</view>
			</view>
			<view class="list">
				<view class="item" v-for="(item, index) in orderTypeList" :key="index" @click="navToOrder(item.type)">
					<view class="icon-box">
						<u-icon :name="item.icon" size="40" color="#018d71"></u-icon>
						<view class="badge" v-if="item.num > 0">{{item.num}}</view>
					</view>
					<text>{{item.name}}</text>
				</view>
			</view>
		</view>

		<!-- 我的服务 -->
		<view class="card menu-list">
			<view class="card-header">
				<text class="title">我的服务</text>
			</view>
			<view class="menu-items">
				<view class="menu-item" @click="navTo('/pages/address/list')">
					<view class="left">
						<u-icon name="map" size="40" color="#018d71"></u-icon>
						<text>收货地址</text>
					</view>
					<u-icon name="arrow-right" size="24" color="#999"></u-icon>
				</view>
				<view class="menu-item" @click="toHome()">
					<view class="left">
						<u-icon name="info-circle" size="40" color="#018d71"></u-icon>
						<text>关于我们</text>
					</view>
					<u-icon name="arrow-right" size="24" color="#999"></u-icon>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	let vk = uni.vk;

	export default {
		data() {
			return {
				hasWeixinAuth: true,
				encryptedKey: "",
				data: {},
				hasLogin: false,
				userInfo: {},
				orderTypeList: [{
						name: '待付款',
						icon: 'red-packet',
						type: 0,
						num: 0
					},
					{
						name: '待发货',
						icon: 'car',
						type: 1,
						num: 0
					},
					{
						name: '待收货',
						icon: 'car-fill',
						type: 2,
						num: 0
					},
					{
						name: '已完成',
						icon: 'order',
						type: 3,
						num: 0
					}
				]
			}
		},
		onShow() {
			this.checkLogin()
			this.checkUnpaidOrder()
			this.getOrderNum()
		},
		onLoad(options) {
			vk = uni.vk;
			this.init();
		},
		methods: {
			init() {
				let that = this;
				// #ifdef MP-WEIXIN
				vk.userCenter.code2SessionWeixin({
					data: {
						needCache: true
					},
					success: (data) => {
						that.encryptedKey = data.encryptedKey;
					},
				});
				// #endif
			}, // 微信登录
			loginByWeixin(type) {
				let that = this;
				vk.userCenter.loginByWeixin({
					data: {
						type
					},
					success: (data) => {
						vk.alert(data.msg);
						that.checkLogin()
					}
				});
			},
			code2SessionWeixin() {
				vk.userCenter.code2SessionWeixin({
					success: (data) => {
						vk.alert(JSON.stringify(data));
					},
				});
			},
			// 设置用户昵称头像
			setUserInfo() {
				vk.navigateTo('/pages/user/set-user-info')
			},
			// 检查登录状态
			checkLogin() {
				this.userInfo = vk.getVuex('$user.userInfo')
				console.log(this.userInfo);
				this.hasLogin = !!this.userInfo._id
				if (!this.hasLogin) {
					vk.toast('请先登录!')
				}
			},
			// 获取订单数量
			async getOrderNum() {
				this.orderTypeList.forEach(item => {
					item.num = 0
				})
				// 调用云函数获取各状态订单数量
				if (this.userInfo) {
					vk.callFunction({
						url: 'client/order/kh/getCount',
						data: {
							uid: this.userInfo._id,
							status: [0, 1, 2],
						},
						success: (data) => {
							if(data && data.groupCount) {
								data.groupCount.rows.forEach(item => {
									this.orderTypeList[item._id].num = item.count
								})
							}
						}
					})
				}
			},
			// 跳转到订单列表
			navToOrder(type) {
				if (!this.hasLogin) {
					this.checkLogin()
					return
				}
				uni.navigateTo({
					url: `/pages/order/list?type=${type}`
				})
			},
			// 页面跳转
			navTo(url) {
				if (!this.hasLogin) {
					this.checkLogin()
					return
				}
				uni.navigateTo({
					url
				})
			},
			toHome(){
				uni.switchTab({
					url: '/pages/index/index'
				})
			},
			// 检查未支付订单
			checkUnpaidOrder() {
				if(!this.hasLogin) {return}
				vk.callFunction({
					url: 'client/order/kh/getUnpaid',
					data: {
						uid: vk.getVuex('$user.userInfo._id'),
						status: 0,
					},
					success: (data) => {
						if(data && data.item) {
							uni.showModal({
								title: '未支付订单提醒',
								content: '您有未支付的订单，是否立即支付？',
								success: (res) => {
									if(res.confirm) {
										uni.navigateTo({
											url: `/pages/order/detail?id=${data.item._id}`
										})
									}
								}
							})
						}
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.user {
		min-height: 100vh;
		background-color: #f5f5f5;
		padding-bottom: 40rpx;

		.user-info {
			position: relative;
			height: 240rpx;
			
			.bg-top {
				position: absolute;
				top: 0;
				left: 0;
				right: 0;
				height: 240rpx;
				background: linear-gradient(180deg, #018d71 0%, #01725c 100%);
			}
			
			.content {
				position: relative;
				z-index: 1;
				display: flex;
				align-items: center;
				padding: 60rpx 30rpx 0;
				
				.left {
					display: flex;
					align-items: center;
					
					.avatar {
						width: 120rpx;
						height: 120rpx;
						border-radius: 50%;
						border: 4rpx solid rgba(255,255,255,0.4);
					}
					
					.info {
						margin-left: 30rpx;
						color: #fff;
						
						.nickname {
							font-size: 36rpx;
							font-weight: 500;
							margin-bottom: 16rpx;
						}
						
						.mobile {
							font-size: 24rpx;
							opacity: 0.8;
						}
						
						.login-btn {
							font-size: 28rpx;
							padding: 8rpx 24rpx;
							background: rgba(255,255,255,0.2);
							border-radius: 30rpx;
						}
					}
				}
			}
		}

		.card {
			margin: 20rpx;
			background-color: #fff;
			border-radius: 16rpx;
			box-shadow: 0 2rpx 12rpx rgba(0,0,0,0.04);
			
			.card-header {
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 30rpx;
				border-bottom: 1rpx solid #f5f5f5;
				
				.title {
					font-size: 32rpx;
					font-weight: bold;
					color: #333;
				}
				
				.more {
					display: flex;
					align-items: center;
					font-size: 26rpx;
					color: #666;
				}
			}
		}

		.order-entrance {
			margin-top: 20rpx;
			
			.list {
				display: flex;
				padding: 30rpx 0;
				
				.item {
					flex: 1;
					display: flex;
					flex-direction: column;
					align-items: center;
					
					.icon-box {
						position: relative;
						margin-bottom: 16rpx;
						
						.badge {
							position: absolute;
							top: -10rpx;
							right: -10rpx;
							min-width: 32rpx;
							height: 32rpx;
							line-height: 32rpx;
							text-align: center;
							background-color: #ff5722;
							color: #fff;
							font-size: 20rpx;
							border-radius: 16rpx;
							padding: 0 8rpx;
						}
					}
					
					text {
						font-size: 26rpx;
						color: #333;
					}
				}
			}
		}

		.menu-list {
			.menu-items {
				.menu-item {
					display: flex;
					justify-content: space-between;
					align-items: center;
					padding: 30rpx;
					border-bottom: 1rpx solid #f5f5f5;
					
					&:last-child {
						border-bottom: none;
					}
					
					.left {
						display: flex;
						align-items: center;
						
						text {
							font-size: 28rpx;
							color: #333;
							margin-left: 20rpx;
						}
					}
				}
			}
		}
	}
</style>